/**
 * 工厂页组件
 */
<script setup>
import FactoryGeo from '@/components/factory/FactoryGeo.vue'
import FactoryTop from '@/components/factory/FactoryTop.vue'
import FactoryCenter from '@/components/factory/FactoryCenter.vue'
import FactoryBottom from '@/components/factory/FactoryBottom.vue'
import FactoryPopup from '@/components/factory/FactoryPopups/FactoryPopup.vue'
import BrandPopup from '@/components/factory/FactoryPopups/BrandPopup.vue'
import ModelPopup from '@/components/factory/FactoryPopups/ModelPopup.vue'
import EmployeePopup from '@/components/factory/FactoryPopups/EmployeePopup.vue'
import WarehousingPopup from '@/components/factory/FactoryPopups/WarehousingPopup.vue'
import CompletedPopup from '@/components/factory/FactoryPopups/CompletedPopup.vue'
import ProportionPopup from '@/components/factory/FactoryPopups/ProportionPopup.vue'
import ProgressPopup from '@/components/factory/FactoryPopups/ProgressPopup.vue'
</script>

<template>
  <div class="factory-container">
    <div class="factory-below">
      <FactoryGeo/>
    </div>

    <div class="factory-above">
      <div class="factory-top">
        <FactoryTop/>
      </div>

      <div class="factory-center">
        <FactoryCenter/>
      </div>

      <div class="factory-bottom">
        <FactoryBottom/>
      </div>
    </div>
  </div>

  <FactoryPopup/>
  <BrandPopup/>
  <ModelPopup/>

  <EmployeePopup/>
  <WarehousingPopup/>
  <CompletedPopup/>
  <ProportionPopup/>
  <ProgressPopup/>
</template>

<style lang="scss" scoped>
.factory-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: #12161b;

  .factory-below {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .factory-above {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

    .factory-top {
      width: 100%;
      height: 5%;
      margin-bottom: 1%;
    }

    .factory-center {
      width: 100%;
      height: 13%;
      margin-bottom: 1%;
    }

    .factory-bottom {
      width: 100%;
      height: 78%;
    }
  }
}
</style>